<template>
	<view class="page">
		<view class="physical padding" v-for="item in content" :key="item.id" v-if="content.length > 0 " @click="showDetail(item)">

			<view class="physical_header">
				<view class="physical_header_store">
					{{item.cuStore?.name}}
				</view>
				<view class="physical_header_pauseTimes">
					<span style="font-size: 32rpx;padding: 0 12px;">{{ statusMap(item.status)}} </span>
				</view>
			</view>
			<view class="physical_footer">
				<view class="physical_footer_time text-gray text-md block">
					设备:{{item.mdDevice?.code}}
				</view>
				<view class="physical_footer_time text-gray text-md">
					设备版本:{{item.mdDevice?.mdDeviceTypeId}}
				</view>

				<view class="physical_footer_time text-gray text-md">
					备注:{{item.descript}}
				</view>
				<view class="physical_footer_time margin-bottom-sm text-gray text-sm">
					创建时间:{{item.createTime}}
				</view>
			</view>
			<view class="physical_footer" >
				<view class="physical_footer_time text-gray text-md margin-bottom-sm">
					店铺地址: {{item.cuStore?.address}}
				</view>
			</view>
		</view>
		<wd-pagination v-model="pagination.page" :total="pagination.total" @change="handleChange" />
		<view class="empty" v-if="content.length == 0">
			<wd-status-tip image="content" tip="暂无维修报修记录" />
		</view>
		<view class="add_btn flex items-center justify-center"  @click="addFun">
			<wd-icon name="add" size="22px"></wd-icon>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from "vue";
	import deviceRepairApiService from "@/api/maintenance.js"

	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
		const content = ref([])
	const pagination = reactive({
		page : 1,
		pageSize : 10,
		total :0
	})

	const statusMap = (key) => {
		return deviceRepairApiService.statusString(key)
	}

	const fetchData = () =>{
		deviceRepairApiService.list({
			pageNo: pagination.page,
			size : pagination.pageSize
		}).then(res =>{
			uni.stopPullDownRefresh()
			pagination.page  = res.current
			pagination.total = res.total
			content.value = res.records || []
		})
	}

	onShow(()=>{
		fetchData()
	})


	onPullDownRefresh(()=>{
		pagination.page = 1
		fetchData()
	})




	const handleChange = (e) =>{
		pagination.page = e.value
		fetchData()
	}

	const showDetail = (e) =>{
		uni.navigateTo({
			url: `/pages/maintenance/detail?id=${e.id}`
		})
	}

	const addFun = () =>{
		uni.navigateTo({
			url : "/pages/maintenance/add"
		})
	}
</script>


<style lang="scss" scoped>
	.relative{
		position: relative;
	}
	.h-full{
		min-height: 100vh;
		padding-bottom: 20rpx;
	}
	.btn{
		margin-top: 20rpx;
		width: 180rpx;
		margin-left: 80%;
	}
  .empty {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }


	.add_btn {
		position: fixed;
		bottom: 120rpx;
		right: 40rpx;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 12px 0 rgba(#1b1b1b, .2);
		color: #fff;
		background-color: #3775E9;
	}

	.physical {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 4px 0px #efefef;
		padding: 40rpx;
		color: #666;

		&_header {
			border-bottom: 1px solid #efefef;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_store {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}

			&_pauseTimes {
				font-size: 12px;
				color: #f59e0b;

			}
		}

		&_body {
			padding: 40rpx 0;
			border-bottom: 1px solid #efefef;
			font-size: 12px;

			&_name {
				font-size: 16px;
				color: #f43f5e;
				font-weight: 600;
				display: inline-block;
			}
		}

		&_footer {
			font-size: 12px;
			border-bottom: 1px solid #efefef;
			padding: 10rpx 0;

			&_time {
				padding-top: 10rpx;
			}

			&_storeAddress {
				padding: 10rpx 0;
			}
		}

		&_actions {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: end;
			color: #00acac;
		}
	}
</style>
